<template>
	<view class="jk-page-container bg">
    <!--<u-sticky>
      <view class="search-bar">
        <view class="search-bar-top-box">
          <view class="search-bar-item" style="border-right: solid 1rpx #5c7cf7;" @click="onClickWorkshop">
            <view class="search-bar-item-val">{{ searchParams.workshopName || '车间' }}</view>
            <u-icon name="arrow-down-fill" size="14" color="#fff"></u-icon>
          </view>
          <view class="search-bar-item" @click="onClickGroup">
            <view class="search-bar-item-val">{{ searchParams.groupName || '班组' }}</view>
            <u-icon name="arrow-down-fill" size="14" color="#fff"></u-icon>
          </view>
        </view>
        <u-search @search="onSearchBtn" @clear="onSearchBtn('')" @custom="onSearchBtn" placeholder="员工姓名" height="68rpx" v-model="searchParams.name" :actionStyle="{ color: '#fff', fontSize: '16px' }"></u-search>
      </view>
    </u-sticky>-->

    <jkSearchBar
        :search-val.sync="searchParams.name"
        :searchLeftItemName="searchParams.workshopName"
        :searchRightItemName="searchParams.groupName"
        searchRightItemNoDataName="班组"
        placeholder="员工姓名"
        @search="onSearchBtn"
        @search-left-item="onClickWorkshop"
        @search-right-item="onClickGroup"
    ></jkSearchBar>

    <view class="column-list-container">
      <view
        v-for="(item) in tableData"
        :key="item.id"
        class="column-list-item"
      >
        <view class="column-list-item-default column-list-item-title flex-between-center">
          <view>{{ item.name }}</view>
          <u-tag :text="item.postName || '无'" plain size="mini" icon="tags-fill"></u-tag>
        </view>
        <view class="column-list-item-default column-list-item-sub-title flex-between-center">
          <view class="flex-start-center">所属车间：{{ item.workshopName || '无' }}</view>
        </view>
        <view class="column-list-item-default column-list-item-sub-title">
          <view class="flex-start-center margin-bottom-10">责任机台：{{ item.empMachineList.length }}</view>
          <view class="flex-start-center">
            <view
                v-for="machineItem in item.empMachineList"
                :key="machineItem.machineId"
                class="item-gap"
            >
              <u-tag :text="machineItem.machineName" plain size="mini"></u-tag>
            </view>
          </view>
          <view class="margin-top-10">
            <u-button @click="onToBindBtn(item)" type="text" :disabled="item.faultState">分配机台</u-button>
          </view>
        </view>
      </view>
      <jk-no-more :pageIndex="searchParams.pageNo" :show="isNoMore" />
    </view>
  </view>
</template>

<script>
import {empListWithMachine, userDataGroups, userDataWorkshops} from "../../../api";
  import {isLastPage, pageConfig, showLoading} from "../../../utils/jk-utils";
  import loadingMore from '../../../mixins/loading-more';
  import jkNoMore from "../../../jk-components/jk-no-more";
  import repairState from "./components/repair-state";
import jkSearchBar from "../../../jk-components/jk-search-bar";
  export default {
    mixins: [loadingMore],
    components: {jkNoMore, jkSearchBar},
    data() {
			return {
			  apiConfig: {
			    list: empListWithMachine
        },
			  upkeepStateConfig: {
          0: { name: '未开始' },
          1: { name: '保养中' },
          2: { name: '保养完成' },
        },
        searchParams: {
          pageIndex: 1,
          pageSize: pageConfig.pageSize,
          totalCount: pageConfig.totalCount,
          name: '',
          groupId: null,
          groupName: '',
          workshopId: null,
          workshopName: '',
          processId: null,
          processName: '',
          finishState: 0
        },
        tableData: [],
        workshopList: [],
        groupList: []
			}
		},
		onLoad() {
		},
    onShow() {
      this.getDependentData();
    },
		methods: {
      onClearOfSearchIpt() {
        this.$set(this.searchParams, 'name', '');
        this.onSearchBtn();
      },
      onToBindBtn(item) {
        uni.navigateTo({
          url: `/pages/production/empBindMachine/toBind?id=${ item.id }&name=${item.name}`
        })
      },
      onSearchBtn(e) {
        this.$set(this.searchParams, 'name', e);
        this.getListRequest();
      },
      getEmpGroupListRequest() {
        return userDataGroups().then(res => {
          if (res.data.status === 200) {
            if (res.data.res) {
              if (res.data.res.groupList) {
                this.groupList = res.data.res.groupList.map(x => {
                  return {
                    id: x.groupId,
                    name: x.groupName
                  }
                });
              }
              if (res.data.res.defaultUserDataEntity) {
                this.$set(this.searchParams, 'groupId', res.data.res.defaultUserDataEntity.groupId);
                this.$set(this.searchParams, 'groupCode', res.data.res.defaultUserDataEntity.groupCode);
                this.$set(this.searchParams, 'groupName', res.data.res.defaultUserDataEntity.groupName);
              }
            }
          }
        })
      },
      async getDependentData() {
        showLoading(true);
        this.searchParams.pageNo = 1;
        await this.getWorkshopDataRequest();
        await this.getEmpGroupListRequest();
        if (this.searchParams.workshopId) await this.getListRequest();
        showLoading(false);
      },
      getListRequest() {
        showLoading(true);
        this.searchParams.pageNo = 1;
        return empListWithMachine(this.searchParams).then(res => {
          showLoading(false);
          if (res.data.status === 200) {
            this.$set(this.searchParams, 'totalCount', res.data.count);
            this.tableData = res.data.res;
            this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
          }
        })
      },
      getWorkshopDataRequest() {
        return userDataWorkshops().then(res => {
          if (res.data.status === 200) {
            this.$set(this.searchParams, 'workshopId', res.data.res.defaultUserDataEntity.workshopId);
            this.$set(this.searchParams, 'workshopName', res.data.res.defaultUserDataEntity.workshopName);
            this.workshopList = res.data.res.workshopList.map(x => {
              return {
                id: x.workshopId,
                name: x.workshopName
              }
            });
          }
        })
      },
      onClickWorkshop() {
        let _this = this;
        uni.showActionSheet({
          itemList: _this.workshopList.map(x => x.workshopName),
          success (res) {
            _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
            _this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex].workshopName);
            _this.getListRequest();
          }
        });
      },
      onClickGroup() {
        let _this = this;
        uni.showActionSheet({
          itemList: _this.groupList.map(x => x.name),
          success (res) {
            _this.$set(_this.searchParams, 'groupId', _this.groupList[res.tapIndex].id);
            _this.$set(_this.searchParams, 'groupName', _this.groupList[res.tapIndex].name);
            _this.getListRequest();
          }
        });
      }
		},
    onReachBottom() {
      this.getMore();
    }
	}
</script>

<style lang="scss" scoped>
</style>
